<template>
  <div>
    <div class="ruleequipment-tab-title-row">
      <div
        @click="ruleequipmenttype = 1"
        :class="ruleequipmenttype == 1 ? 'ruleequipmenttype_on' : ''"
      >
        指令控制
      </div>
      <div
        @click="ruleequipmenttype = 2"
        :class="ruleequipmenttype == 2 ? 'ruleequipmenttype_on' : ''"
      >
        批量修改空调温度
      </div>
      <div
        @click="ruleequipmenttype = 3"
        :class="ruleequipmenttype == 3 ? 'ruleequipmenttype_on' : ''"
      >
        设备组
      </div>
      <div
        @click="ruleequipmenttype = 4"
        :class="ruleequipmenttype == 4 ? 'ruleequipmenttype_on' : ''"
      >
        单设备定时
      </div>
    </div>
    <div
      class="control-Action-page"
      :style="ruleequipmenttype == 1 ? 'display:block' : 'display:none'"
    >
      <!-- aside -->
      <div class="manage-page-aside">
        <div class="head-section" style="overflow: hidden">
          <h3 class="table-head">网点指令：</h3>
          <el-select
            @change="organChangeEvent"
            v-model="organId"
            placeholder="请选择"
            value-key="item"
          >
            <el-option
              v-for="item in organOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div style="display: flex; justify-content: space-between">
          <div>
            <el-input
              v-model="Searchremark"
              @keydown.enter.native="searchEnter"
              onkeypress="if(event.keyCode == 13) return false;"
              placeholder="请输入名称内容"
              clearable
              style="width: 1.5rem; margin-right: 0.1rem"
            ></el-input>
            <el-button
              type="primary"
              style="margin-right: 0"
              @click="onSearchSubmit"
              class="search-mr"
              >查询</el-button
            >
          </div>
          <div>
            <el-button
              @click="handleAddAction"
              type="primary"
              plain
              size="medium"
              >新增
            </el-button>
            <el-button
              @click="handleEditAction"
              type="primary"
              plain
              size="medium"
              >编辑
            </el-button>
            <el-button
              @click="handleDeleteAction"
              type="primary"
              plain
              size="medium"
              >删除
            </el-button>
          </div>
        </div>

        <div class="table-section" style="top: 1.05rem">
          <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 100%">
            <el-table
              height="6.8rem"
              ref="refActionTable"
              :data="ActionTableData"
              border
              highlight-current-row
              :row-class-name="tableRowClassName"
              @row-click="handleCurrentChange"
            >
              <el-table-column type="index" label="序号" width="60">
              </el-table-column>
              <el-table-column
                prop="name"
                label="指令名称"
                style="cursor: pointer"
              >
              </el-table-column>
              <el-table-column label="编辑操作" :width="$store.getters.user.manager>0?'150':'100'">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleexeAction(scope.row.id)"
                    >执行</el-button
                  >
                  <el-button
                    type="primary"
                    size="small"
                    v-if="$store.getters.user.manager>0"
                    @click.stop="handleUserbind(scope.row.id,scope.row.name)"
                    >绑定</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
      </div>
      <!-- content -->
      <div class="content manage-page-content">
        <div class="head-section">
          <header>
            <el-button
              @click="handleAddAreaAppliance"
              v-if="ActionId != null"
              size="medium"
              type="primary"
              plain
              >添加
            </el-button>
            <el-button
              @click="handleDeleteAreaAppliance"
              v-if="ActionId != null"
              size="medium"
              type="primary"
              plain
              >移除
            </el-button>
          </header>
          <h3 class="table-head">包含的电器</h3>
        </div>
        <div class="table-section">
          <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 100%">
            <el-table
              :data="ActionAppliancesData"
              ref="equipmentTable"
              height="7rem"
              @selection-change="handleManageAreaChange"
              border
              style="width: 100%; margin-top: 10px"
            >
              <el-table-column type="selection" width="40"> </el-table-column>
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="channelName" label="名称">
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
      </div>
    </div>

    <probe-airmax-temp v-if="ruleequipmenttype == 2"></probe-airmax-temp>
    <probe-group v-if="ruleequipmenttype == 3"></probe-group>
    <single-probe v-if="ruleequipmenttype == 4"></single-probe>
    <div></div>
    <!-- 新增组弹框 -->
    <el-dialog
      class="same-dia"
      :title="isAddNew ? '新增指令组' : '编辑指令组'"
      :visible.sync="dialogActionVisible"
      width="480px"
      @close="resetForm"
      :close-on-click-modal="false"
    >
      <el-form
        :rules="rules"
        :model="pojoAction"
        ref="pojoForm"
        label-width="90px"
      >
        <el-form-item label="名称：" prop="name">
          <el-input v-model="pojoAction.name"></el-input>
        </el-form-item>
        <el-form-item label="开关：" prop="action">
          <el-radio v-model="pojoAction.action" label="1">开</el-radio>
          <el-radio v-model="pojoAction.action" label="0">关</el-radio>
        </el-form-item>

        <el-form-item
          label="包含空调："
          prop="remark"
          v-show="pojoAction.action == 1"
        >
          <el-radio v-model="airOperationFlag" :label="1">是</el-radio>
          <el-radio v-model="airOperationFlag" :label="2">否</el-radio>
        </el-form-item>
        <el-form-item
          label="温度："
          v-show="airOperationFlag == 1"
          prop="temperature"
        >
          <el-button
            icon="el-icon-minus"
            @click="handleTemperatureChange('reduce')"
            round
          ></el-button>
          <span class="temperature-txt">{{ pojoAction.temperature }}℃</span>
          <el-button
            icon="el-icon-plus"
            @click="handleTemperatureChange('add')"
            round
          ></el-button>
        </el-form-item>
        <el-form-item
          label="空调模式"
          prop="mode"
          v-show="airOperationFlag == 1"
        >
          <el-radio-group v-model="pojoAction.mode">
            <el-radio-button
              v-for="item in modeOptions"
              :key="item.M"
              :label="item.M"
              >{{ item.name }}</el-radio-button
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注：" prop="note">
          <el-input v-model="pojoAction.note"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="isAddNew"
          type="primary"
          @click="addActionSubmit('pojoForm')"
          >确 定
        </el-button>
        <el-button v-else type="primary" @click="editActionSubmit('pojoForm')"
          >确 定
        </el-button>
        <el-button @click="dialogActionVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加设备 -->
    <el-dialog
      title="添加设备"
      :visible.sync="dialogAddAreaVisible"
      width="610px"
      @close="reGetUserBindAreaData"
      :close-on-click-modal="false"
    >
      <div style="margin-bottom: 10px">
        <span style="color: #fff">设备所属区域：</span>
        <el-cascader
          :options="AreaByOrgandata"
          :props="ProbeChannelProps"
          v-model="areaid"
          @change="handleChange"
          filterable
          clearable
        >
        </el-cascader>
      </div>
      <div class="prodtransfer">
        <el-transfer
          :render-content="renderFunc"
          filterable
          filter-placeholder="请输入设备名称"
          :titles="['未加入设备', '已加入设备']"
          v-model="proadvalue"
          :data="prodlistdata"
          :props="prodprops"
        >
        </el-transfer>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="sub-can-btn-box">
          <el-button @click="submitAddManageArea" size="medium" type="primary"
            >确 定
          </el-button>
          <el-button size="medium" @click="dialogAddAreaVisible = false"
            >取 消
          </el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 绑定用户 -->
    <el-dialog
      :title="`${bindActiontitle}绑定用户`"
      :visible.sync="dialogBindUserVisible"
      width="610px"
      :close-on-click-modal="false"
    >
      <div class="usertransfer prodtransfer">
        <el-transfer
          :render-content="userrenderFunc"
          ref="usertransfer"
          filterable
          filter-placeholder="请输入用户名称"
          :titles="['未绑定用户', '已绑定用户']"
          v-model="bindUserdata"
          :data="userListdata"
          :props="Userprops"
          @change="submittargetBind"
        >
        </el-transfer>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="sub-can-btn-box">
          <el-button  @click="clear()" size="medium" type="primary"
            >确 定
          </el-button>
          <el-button size="medium" @click="clear()"
            >取 消
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ajax from "@/utils/ajax";
import { tableSelection, deleteConfirm } from "@/utils/elementui.js";
import ProbeAirmaxTemp from "../probe-airmaxtemp/index.vue";
import ProbeGroup from "../probe-group/index.vue";
import SingleProbe from "../page-singleprobe/index.vue";

import axios from "axios";
export default {
  data() {
    return {
      organId: "",
      organOptions: [],
      permission: {
        add: false,
        modify: false,
        delete: false,
        bind_strategy: false,
        add_area_channel: false,
        delete_area_channel: false,
      },
      customerId: "",
      allActionTableData: [],
      ActionTableData: [],
      tableIndex: 0,
      currentAction: null,
      ActionId: null,

      isAddNew: true,
      // 新增组
      dialogActionVisible: false,
      rules: {
        name: [{ required: true, message: "组名称不能为空", trigger: "blur" }],
        temperature: [
          { required: true, message: "温度不能为空", trigger: "blur" },
        ],
      },
      pojoAction: {
        organId: null,
        name: "",
        note: "",
        speed: 1,
        temperature: 26,
        windDirection: 1,
        mode: 1,
        action: "1",
      },
      modeOptions: [
        {
          name: "制冷",
          M: "1",
        },

        {
          name: "制暖",
          M: "2",
        },
      ],
      // 绑定指令
      dialogBandStrategy: false,
      strategyTableData: [],
      allstrategyTableData: [],
      mulStrategySelection: [],
      dialogStrategyDetali: false,
      operationTableData: [],
      // 区域和电器table
      ActionAppliancesData: [],
      dialogAddAreaVisible: false,
      dialogAreaNodeCheck: [],
      multipleAreaAppSelection: [],
      Searchremark: "",
      ruleequipmenttype: 1,
      //区域
      areaData: [],
      areaid: "",
      proadvalue: [],
      prodlistdata: [],
      allprodlistdata: [],
      prodprops: {
        key: "id",
        label: "channelName",
      },
      renderFunc(h, option) {
        return <span title={option.channelName}>{option.channelName}</span>;
      },
      airOperationFlag: 2,
      AreaByOrgandata: [],
      ProbeChannelProps: {
        children: "children",
        label: "name",
        value: "id",
        checkStrictly: true,
      },
      userListdata: [],
      bindUserdata: [],
      Userprops: {
        key: "id",
        label: "name",
      },
      dialogBindUserVisible: false,
      userrenderFunc(h, option) {
        return <span title={option.name}>{option.name}</span>;
      },
      bindActionId:null,
      bindActiontitle:'',
    };
  },
  components: { ProbeAirmaxTemp, ProbeGroup, SingleProbe },
  created() {
    this.customerId = this.$store.getters.customerId;
  },
  mounted() {
    this.$store.dispatch("actions/dynamicTitleAction", this.$route.meta.title);
    this.getOrganListData();
    this.getUserListData()
  },

  methods: {
    // 设置可操作的权限
    setPermission() {
      let role_permissions = this.$store.getters.rolePermissions;
      console.log("-----------------------", role_permissions);
      for (let item of role_permissions) {
        if (item.action === "/web/control_Action") {
          for (let permission of item.privilegeList) {
            switch (permission.action) {
              case "/web/control_Action/add":
                this.permission.add = true;
                break;
              case "/web/control_Action/modify":
                this.permission.modify = true;
                break;
              case "/web/control_Action/delete":
                this.permission.delete = true;
                break;
              case "/web/control_Action/bind_strategy":
                this.permission.bind_strategy = true;
                break;
              case "/web/control_Action/add_area_channel":
                this.permission.add_area_channel = true;
                break;
              case "/web/control_Action/delete_area_channel":
                this.permission.delete_area_channel = true;
                break;
              default:
                break;
            }
          }
        }
      }
    },
    // 获取网点列表
    getOrganListData() {
      ajax.get({
        url: this.$API.getUserOrgan + this.$store.getters.user.id,
        success: (response) => {
          const resp = response.data;
          if (resp.length > 0) {
            this.organOptions = resp;
            this.organId = resp[0].id;
            this.getActionData();
            this.getOrganProbeListData();
            this.getAreaTreeByOrganId();
          } else {
            this.organOptions = [];
          }
        },
        error: (res) => {
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },
    // 获取用户列表
    getUserListData() {
      let customerId = this.$store.getters.customerId;
      ajax.get({
        url: this.$API.getUserListByCustomerId + customerId,

        success: (response) => {
          //console.log(response)
          if (response.data != null && response.data.length > 0) {

            this.userListdata = response.data.filter((item) => item.manager !=2 && item.id != this.$store.getters.user.id);
          } else {
            this.userListdata = [];
          }
        },
        error: (res) => {
          //console.log(res)
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },
    // 编辑控制组
    handleUserbind(id,name) {
      this.bindUserdata=[]
     this.dialogBindUserVisible=true
     this.bindActionId = id
     this.bindActiontitle=name
     ajax.post({
        url: this.$API.getListByActionId + this.bindActionId,
        success: (response) => {
          const resp = response.data;
       
          if (resp!=null&&resp.length > 0) {
            for(let item of resp){
              this.bindUserdata.push(item.id)
            }
          } else {
            this.bindUserdata=[]
          }
        },
      });
    },
    clear(){
      this.dialogBindUserVisible = false
      this.bindUserdata=[]
      this.$refs.usertransfer.clearQuery('left')
      // 清空右边搜索
      this.$refs.usertransfer.clearQuery('right')
    },
    submittargetBind(value, direction, movedKeys) {
      let self = this;
      //添加
      if (direction == "right") {
        axios
          .post(this.$API.bindActionUserTarget + this.bindActionId, movedKeys)
          .then(function (res) {
            if (res.data.success) {
              return
            }
          });
      }
      //移除
      else {
        axios
          .post(this.$API.removeByUserIdListAndActionId + this.bindActionId, movedKeys)
          .then(function (res) {
            if (res.data.success) {
              return
            }
          });
      }
    },
    organChangeEvent() {
      this.getActionData();
      this.getOrganProbeListData();
      this.getAreaTreeByOrganId();
    },
    //通过网点获取区域列表
    getAreaTreeByOrganId() {
      ajax.get({
        url: this.$API.getAreaTreeByOrganId + this.organId,
        success: (response) => {
          this.areaid = "";
          this.AreaByOrgandata = response.data;
        },
        error: (res) => {
          //console.log(res)
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },
    // 获取控制组的数据
    getActionData() {
      ajax.post({
        url: this.$API.getAcitonListByUserId + `${this.$store.getters.user.id}/${this.organId}`,
        success: (response) => {
          const resp = response.data;
          this.allActionTableData = resp;
          this.ActionTableData = resp;
          if (resp.length > 0) {
            this.$nextTick(() => {
              let index = this.tableIndex;
              this.$refs.refActionTable.setCurrentRow(
                this.$refs.refActionTable.data[index]
              );
              this.currentAction = resp[index];
              this.ActionId = resp[index].id;
              this.getActionAppliances();
            });
          } else {
            this.ActionAppliancesData = [];
          }
        },
      });
    },
    //获取网点下设备
    getOrganProbeListData() {
      ajax.get({
        url: this.$API.getProbeChannelByOrganId + this.organId,
        success: (res) => {
          this.prodlistdata = res.data;
          this.allprodlistdata = res.data;
        },
        error: (err) => {
          // console.log(err)
          this.$message({
            message: err.message,
            type: "error",
          });
        },
      });
    },
    // 获取指令下的设备
    getActionAppliances() {
      let po_id = this.ActionId;
      ajax.get({
        url: this.$API.actionChannelList + po_id,
        // data: { id: po_id },
        success: (response) => {
          const resp = response.data;
          this.ActionAppliancesData = resp;
          let existsprod = [];
          if (this.ActionAppliancesData) {
            this.ActionAppliancesData.forEach((data) => {
              existsprod.push(data.channelId);
            });
          }
          this.proadvalue = existsprod;
        },
      });
    },

    // table每行加上index
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    // 点击
    handleCurrentChange(row) {
      this.currentAction = row;
      this.ActionId = row.id;
      this.tableIndex = row.index;
      this.multipleManageActionSel = [];
      this.multipleAvailableActionSel = [];
      this.$nextTick(() => {
        this.getActionAppliances();
      });
    },

    // 新增控制组
    handleAddAction() {
      this.isAddNew = true;
      this.dialogActionVisible = true;
    },
    addActionSubmit(formName) {
      this.pojoAction.organId = this.organId;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          ajax.post({
            url: this.$API.createAction,
            data: this.pojoAction,
            success: (response) => {
              if (response.success) {
                this.getActionData();
                this.dialogActionVisible = false;
                this.$message({
                  message: response.message,
                  type: "success",
                });
              }
            },
            error: (res) => {
              this.$message({
                message: res.message,
                type: "error",
              });
            },
          });
        }
      });
    },

    // 编辑控制组
    handleEditAction() {
      if (this.currentAction) {
        this.isAddNew = false;
        this.dialogActionVisible = true;
        this.$nextTick(() => {
          this.pojoAction.id = this.currentAction.id;
          this.pojoAction.name = this.currentAction.name;
          this.pojoAction.action = this.currentAction.action;
          this.pojoAction.organId = this.currentAction.organId;
          this.pojoAction.note = this.currentAction.note;
          this.pojoAction.temperature = this.currentAction.temperature;
        });
      } else {
        this.$message({
          message: "请先选择要编辑的指令",
          type: "warning",
        });
      }
    },
    editActionSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          ajax.post({
            url: this.$API.modifyAction + this.pojoAction.id,
            data: this.pojoAction,
            success: (response) => {
              if (response.success) {
                this.getActionData();
                this.dialogActionVisible = false;
                this.$message({
                  message: response.message,
                  type: "success",
                });
              }
            },
            error: (res) => {
              this.$message({
                message: res.message,
                type: "error",
              });
            },
          });
        }
      });
    },

    // 删除组
    handleDeleteAction() {
      if (this.currentAction) {
        let ActionObj = this.currentAction;
        let po_id = ActionObj.id;
        deleteConfirm(this).then((res) => {
          if (res) {
            ajax.post({
              url: this.$API.deleteAction + po_id,
              success: (response) => {
                if (response.success) {
                  this.tableIndex = 0;
                  this.getActionData();
                  this.$message({
                    message: response.message,
                    type: "success",
                  });
                }
              },
              error: (response) => {
                this.$message({
                  message: response.message,
                  type: "error",
                });
              },
            });
          }
        });
      } else {
        this.$message({
          message: "请先选择要删除的组",
          type: "warning",
        });
      }
    },

    // 执行指令
    handleexeAction(id) {
      this.$confirm("确定执行指令?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          ajax.post({
            url: this.$API.exeAction + id,
            success: (response) => {
              if (response.success) {
                this.$message({
                  message: response.message,
                  type: "success",
                });
              }
            },
            error: (response) => {
              this.$message({
                message: response.message,
                type: "error",
              });
            },
          });
        })
        .catch(() => {});
    },
    // 获取控制指令数据
    getControlStrategyData(resData) {
      let po_id = this.customerId;
      ajax.post({
        url: this.$API.getControlStrategy,
        data: { id: po_id },
        success: (response) => {
          // console.log(response)
          const resp = response.data;

          // 处理数据：getActionStrategy方法获取的组对应的控制数据
          let selectedArr = [];
          for (let item of resp) {
            for (let resItem of resData) {
              if (item.id === resItem.strategyId) {
                item.enabled = resItem.enabled;
                item.selected = true;
                selectedArr.push(item);
              }
            }
          }
          this.allstrategyTableData = resp;
          this.strategyTableData = resp;
          // console.log(resp)
          this.$nextTick(() => {
            this.toggleSelection(selectedArr);
          });
        },
      });
    },

    // 已绑定的指令打勾
    toggleSelection(rows) {
      // console.log(rows)
      if (rows) {
        rows.forEach((row) => {
          this.$refs.refStrategyTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.refStrategyTable.clearSelection();
      }
    },

    // 添加电器弹窗
    handleAddAreaAppliance() {
      this.dialogAddAreaVisible = true;
      this.checkList = [];
    },

    submitAddManageArea() {
      let self = this;
      if (this.proadvalue.length == 0) {
        this.$message({
          message: "请先选择探头",
          type: "warning",
        });
        return;
      }
      // console.log(this.proadvalue)
      axios
        .post(this.$API.actionAddChannel + this.ActionId, this.proadvalue)
        .then(function (res) {
          if (res.data.success) {
            self.$message({
              message: "新增成功",
              type: "success",
            });
            self.dialogAddAreaVisible = false;
          }
        });
    },

    // 重新获取绑定区域的数据
    reGetUserBindAreaData() {
      if (this.ActionId != null) {
        this.getActionAppliances();
      }
    },

    // 移除包含的区域和电器
    handleManageAreaChange(value) {
      this.multipleAreaAppSelection = value;
    },
    handleDeleteAreaAppliance() {
      let po_id = this.ActionId;
      let self = this;
      let selectionArr = this.multipleAreaAppSelection;
      let selResult = tableSelection(selectionArr, 0);
      // console.log(selectionArr)
      if (selResult) {
        deleteConfirm(this).then((res) => {
          if (res) {
            let idsArr = [];
            for (let item of selectionArr) {
              idsArr.push(item.id);
            }
            // let ids = idsArr.join(",");
            let ids = idsArr;
            axios.post(this.$API.actionDelChannel, ids).then(function (res) {
              if (res.data.success) {
                self.getActionAppliances();
                self.$message({
                  type: "success",
                  message: res.data.message,
                });
              }
            });
          }
        });
      }
    },
    handleChange(value) {
      let data = [...this.allprodlistdata];
      let areaid;
      if (value != 0) {
        areaid = value.slice(-1)[0];
        this.prodlistdata = data.filter((data) => data.areaId == areaid);
      } else {
        this.areaid = "";
        this.prodlistdata = data;
      }
    },

    // 重置表单
    resetForm() {
      this.$refs["pojoForm"].resetFields();
    },

    onSearchSubmit() {
      this.ActionTableData = [...this.allActionTableData];
      this.ActionTableData = this.ActionTableData.filter((data) =>
        data.name.includes(this.Searchremark)
      );
    },
    searchEnter(e) {
      let keyCode = e.keyCode;
      if (keyCode == 13) {
        this.onSearchSubmit();
      }
    },
    handleTemperatureChange(changeType) {
      let temperatureNumber = parseInt(this.pojoAction.temperature);
      if (changeType == "add") {
        temperatureNumber = temperatureNumber + 1;
      } else {
        temperatureNumber = temperatureNumber - 1;
      }
      // 判断温度范围
      if (temperatureNumber > 31) {
        this.$message({
          message: "温度已经达到最高",
          type: "warning",
        });
        return;
      } else if (temperatureNumber < 16) {
        this.$message({
          message: "温度已经达到最低",
          type: "warning",
        });
        return;
      }
      this.pojoAction.temperature = temperatureNumber;
    },
  },
};
</script>

<style lang="stylus" scoped>
.ruleequipment-tab-title-row {
  height: 0.5rem;
  background-color: #0d2c5a;
  border-bottom: solid 0.01rem #0d235a;
  -webkit-box-shadow: inset 0px 5px 20px 0px rgba(80, 160, 191, 0.5);
  box-shadow: inset 0px 5px 20px 0px rgba(80, 160, 191, 0.5);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 0.1rem;
  display: flex;

  div {
    width: 2rem;
    height: 0.44rem;
    line-height: 0.44rem;
    margin-left: 0.08rem !important;
    border-radius: 5px 5px 0px 0px;
    border: solid 1px #0d235a !important;
    border-bottom: 0 !important;
    margin-top: 0.06rem !important;
    color: #fff !important;
    font-size: 0.16rem !important;
    padding: 0 20px;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
  }

  .ruleequipmenttype_on {
    background-color: #16214d !important;
    color: #fff !important;
  }
}

>>> {
  .control-Action-page {
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.2rem;
    overflow: auto;

    .head-section {
      .table-head {
        /* margin-top 0.2rem */
        height: 0.43rem;
        line-height: 0.43rem;
        font-size: 0.16rem;
        font-weight: normal;
        float: left;
      }

      header {
        float: right;
      }
    }

    .table-section {
      position: absolute;
      top: 0.72rem;
      left: 0.2rem;
      right: 0.2rem;
      bottom: 0.2rem;
    }

    .content {
      .content-head {
        text-align: right;
      }

      .area-table-section {
        position: absolute;
        top: 0.66rem;
        left: 0.2rem;
        right: 0.2rem;
        bottom: 0.2rem;
      }
    }
  }

  .dialog-left {
    .table-head {
      height: 0.3rem;
      margin-top: 0.2rem;
      font-size: 0.16rem;
      font-weight: normal;
    }

    .table-section {
      position: absolute;
      top: 1.2rem;
      left: 0.2rem;
      right: 0.2rem;
      bottom: 0.2rem;
    }

    .dia-table-section {
      height: 300px;
    }
  }

  .el-table__body tr {
    cursor: pointer;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row > td {
    color: #fff;
    background-color: rgba(68, 199, 244, 0.2) !important;
  }

  .el-table__body-wrapper {
    overflow-y: auto !important;
  }

  .el-table .el-checkbox__label {
    color: #fff;
  }

  .el-button.is-round {
    padding: 3px 6px;
  }

  .temperature-txt {
    padding: 0 0.1rem;
    font-size: 0.16rem;
    color: #fff;
  }

  .el-select--mini {
    width: 60px;

    .el-input--suffix .el-input__inner {
      padding-right: 20px;
      padding-left: 10px;
    }
  }

  .air-table-item {
    margin-right: 0.1rem;
  }

  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner {
    background: #409EFF;
  }

  .el-button {
    padding: 0.12rem 0.16rem;
  }

  .el-dialog__footer {
    padding-top: 0;
    padding-bottom: 0.3rem;
  }

  .el-form-item:last-child {
    margin-bottom: 0 !important;
  }

  .area-add {
    width: 380px;
    margin: 0 auto;

    .el-select {
      width: 300px;
    }
  }
}

.equipment-title {
  display: flex;
  margin-bottom: 10px;
}

>>>.equipment-title .el-checkbox__label {
  color: #fff;
}

>>>.equipment-title .el-checkbox {
  min-width: 81px;
  margin-right: 10px;
}

.working-hours-container {
  position: absolute;
  top: 0.5rem;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.2rem;
  overflow: auto;
  background-color: $pageBg;
}

.e-t-r-equipment-row {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 7rem;
  padding: 0.2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #16214d;
  overflow: auto;
}

.e-t-r-equipment-row {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 7rem;
  padding: 0.2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #16214d;
  overflow: auto;
}

.e-t-r-rule-row {
  position: absolute;
  left: 7rem;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0.19rem 0.2rem;
  overflow: auto;
  background: #202c5f;
}

>>>.el-table--striped .el-table__body tr.el-table__row--striped.current-row td, >>>.el-table__body tr.current-row > td {
  color: #fff;
  background-color: rgba(68, 199, 244, 0.2) !important;
}

.e-t-r-rule-box {
  display: flex;
}

.left, .right {
  width: 360px;
  height: 8.1rem;
  padding: 10px;
  border: 1px solid #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.dialog-Action-btn {
  width: 200px;
  padding: 0.2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.dialog-Action-btn .el-button {
  display: block;
  margin: 0.2rem auto;
}

.dialogrule_worktype .el-radio {
  margin-bottom: 10px;
}

>>>.el-dialog .prodtransfer input {
  color: #000;
}

@media screen and (max-width: 1440px) {
  >>>.manage-page-aside .el-input__inner {
    height: 0.34rem;
  }

  >>>.manage-page-aside .el-button {
    padding: 0.09rem 0.15rem;
    font-size: 0.14rem;
  }

  .manage-page-aside .el-button+.el-button {
    margin-left: 0.1rem;
  }
}
</style>
